<template>
  <div class="detail-data-show">
    <textarea ref="markdown" :id="editerId" class="markdown-dom"></textarea>
    <el-button
      v-if="isEdit"
      :class="fullscreen ? 'fullscreen' : 'save-btn'"
      type="primary"
      size="small"
      @click="saveBntClick"
    >保存</el-button>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import 'simplemde/dist/simplemde.min.css'
  import SimpleMDE from 'simplemde'

  @Component({
  })
  export default class DataShow extends Vue {

    @Prop({ type: Boolean, default: false }) isEdit!: boolean
    @Prop({ type: String, default: 'markdown' }) editerId!: string
    editor!: SimpleMDE
    fullscreen = false


    timer?: number

    setData(data: string) {
      this.editor.value(data)
    }

    createTimer() {
      if (!this.isEdit) {
        return
      }
      this.clearTimer()
      this.timer = setInterval(() => {
        this.fullscreen = this.editor.isFullscreenActive()
      }, 500)
    }
    clearTimer () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = 0
      }
    }

    saveBntClick() {
      this.$emit('save', this.editor.value())
    }

    beforeDestroy() {
      this.clearTimer()
    }

    getData() {
      return this.editor.value()
    }
    mounted() {
      const container = document.getElementById("markdown")!
      const previewType = ['table']
      const editerType = ['bold', 'italic', 'strikethrough',
        'heading', 'heading-smaller', 'link', 'image',
        'horizontal-rule', 'side-by-side', 'guide',
        'heading-bigger', 'heading-1', 'heading-2', 'heading-3',
        'code', 'quote', 'unordered-list', 'ordered-list', 'clean-block']
      this.editor = new SimpleMDE({
        element: container,
        hideIcons: this.isEdit ? [] : editerType,
        showIcons: this.isEdit ? previewType : []
      })
      this.createTimer()
    }
  }

</script>

<style lang="scss">
  .CodeMirror, .CodeMirror-scroll {
    min-height: 500px;
  }
</style>
<style scoped lang="scss">
  .detail-data-show {
    position: relative;
    .save-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
    }
    .fullscreen {
      position: fixed;
      right: 10px;
      top: 10px;
      z-index: 100;
    }
  }
</style>
